import React, { Component } from 'react'

// import go from 'gojs'
// import Logo from '../../static/img/logo2.png'
import Logo from '../../static/img/index.jpg'

const go = window.go
const $ = go.GraphObject.make
export default class GoContain extends Component {
  componentDidMount() {
    this.init()
  }
  init = () => {
    this.diagram = $(go.Diagram, 'myDiagram', {
      'initialContentAlignment': go.Spot.Center,
      'undoManager.isEnabled': true,
      allowClipboard: true
    })
    window.$diagram = this.diagram
    this.diagram.nodeTemplate = $(go.Node, 'Auto',
      $(go.Panel, 'Horizontal', 
        $(go.Picture, Logo, {width: 60, height: 60}),
        // $(go.Shape,{ geometry: go.Geometry.parse("M120 0 L80 80 0 50z") }),
        $(go.TextBlock, {alignment: go.Spot.Bottom, margin: 3, background: "lightgreen" }, new go.Binding('text', 'name'))
      ),
    )
    this.diagram.linkTemplate = $(go.Link, 
      $(go.Shape,  { strokeWidth: 4, stroke: 'gray' }),
      $(go.Shape, { toArrow: 'Boomerang', fill: null, strokeWidth: 3})
    )
    this.drawTemplate()
  }
  drawTemplate = () => {
    this.diagram.model = new go.GraphLinksModel([
      {key: 'Red', color: 'lightblue', name: 'application'},
      {key: 'Blue', color: 'red', name: 'clust'}
    ],[
      { from: 'Red', to: 'Blue'}
    ])

   this.diagram.add(
      $(go.Part, "Spot",
        { background: "lightgray" },
        $(go.Shape, "Rectangle",
          { fill: "lightgreen", width: 100, height: 50 }),
        $(go.TextBlock, "TL", { background: "yellow",
                          alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopRight }),
        $(go.TextBlock, "TR", { background: "yellow",
                          alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight }),
        $(go.TextBlock, "BL", { background: "yellow",
                          alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.TopRight }),
        $(go.TextBlock, "BR", { background: "yellow",
                          alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.TopRight })
      ));
  }
  render() {
    return (
      <div id='myDiagram'
        ref={e => this.container = e}
        style={{width: '100%', height: '100%'}}
      >
      </div>
    )
  }
}